<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>
			<button>旋转</button>
		</p>

		<canvas style="background: gray;" id="canvas" width="300" height="150"></canvas>
	</body>

</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var img = new Image();
	// 等同于 var img = document.createElement('img');
	img.src = 'img/girl.jpg';
	img.onload = function () {
		ctx.drawImage(this, 0, 0);
	}

	var num = 0;
	document.querySelector('button').onclick = function () {
		num = num > 4 ? 1 : ++num;
		switch (num) {
			case 1:
				canvas.width = 150;
				canvas.height = 300;
				// 旋转坐标，以左上角为基准进行旋转
				ctx.rotate(90 * Math.PI / 180);
				ctx.drawImage(img, 0, -150);
				break;
			case 2:
				canvas.width = 300;
				canvas.height = 150;
				ctx.rotate(180 * Math.PI / 180);
				ctx.drawImage(img, -300, -150);
				break;
			case 3:
				canvas.width = 150;
				canvas.height = 300;
				ctx.rotate(270 * Math.PI / 180);
				ctx.drawImage(img, -300, 0);
				break;
			case 4:
				canvas.width = 300;
				canvas.height = 150;
				ctx.rotate(360 * Math.PI / 180);
				ctx.drawImage(img, 0, 0);
				break;
		}
	};
</script>